<template lang="pug">
  .good-card-base(v-if="good.title")
    .main-picture
      img(:src="good.pictUrl")
    .good-info
      .title
        img(:src="platformIcon(good)")
        | {{good.title}}
      .tips
        font 现价: ￥{{good.zkPrice}}
        br
        font 券后价:
        font.high ￥{{good.discount_price}}
        br
        font.coupon {{couponTxt()}}
</template>

<script>
import searchIcon from '../assets/icons/search-gray.svg'
import couponIcon from '../assets/icons/coupon-red.svg'
import taobaoIcon from '../assets/icons/taobao.svg'
import tmallIcon from '../assets/icons/tmall.svg'
import Window from '../helpers/window'

export default {
  name: 'GoodCard',
  props: ['good'],
  data () {
    return {
      searchIcon: searchIcon,
      couponIcon: couponIcon
    }
  },
  computed: {
    hasCoupon () {
      if (this.good.coupons && this.good.coupons.length > 0) {
        return true
      } else {
        return false
      }
    }
  },
  methods: {
    scrollBottom () {
      Window.scrollBottom()
    },
    platformIcon (good) {
      if (good.is_tmall) {
        return tmallIcon
      } else {
        return taobaoIcon
      }
    },
    couponTxt () {
      if (this.hasCoupon) {
        return '有优惠券'
      }
      return '无优惠券'
    }
  }
}
</script>

<style lang="sass">
@import '../styles/color.sass';
.good-card-base
  background: $white
  display: flex
  flex-direction: row
  justify-content: space-between
  align-items: stretch
  padding: 10px
  .main-picture
    width: 150px
    height: 150px
    text-align: center
    overflow: hidden
    img
      width: 100%
      height: 100%
  .good-info
    flex: 1 1
    padding-left: 10px
    display: flex
    flex-direction: column
    justify-content: space-between
    align-items: stretch
    .title
      font-size: 1em
      color: $black-8
      overflow: hidden
      text-overflow: ellipsis
      display: -webkit-box
      -webkit-line-clamp: 3
      -webkit-box-orient: vertical
    .tips
      flex: 1 1
      padding-top: 10px
      color: $gray
      font.high
        color: $red-font
        font-size: 1.4em
      font.coupon
        color: $red-font
        font-size: .7em
        background: url(../assets/icons/coupon-red-16.svg) no-repeat
        padding-left: 1.5em
</style>
